<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <style>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        #footer{  background-color: #fff; }
        #footer ul li{  padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; }
        #footer ul li.active{ color: #6ab494; }
        #footer ul li:nth-child(1){ background-image: url(./image/bottombtn0101.png); }
        #footer ul li:nth-child(2){ background-image: url(./image/xue.png); }
        #footer ul li:nth-child(3){ background-image: url(./image/guang.png); }
        #footer ul li:nth-child(4){ background-image: url(./image/wo.png); }
        #footer ul li:nth-child(1).active{ background-image: url(./image/bottombtn0102.png); }
        #footer ul li:nth-child(2).active{ background-image: url(./image/xuey.png); }
        #footer ul li:nth-child(3).active{ background-image: url(./image/guang1.png); }
        #footer ul li:nth-child(4).active{ background-image: url(./image/wo1.png); }
        .flex-con{
          overflow: auto
        }
    </style>
</head>
<body>

  <div id="wrap" class="flex-wrap flex-vertical">
      <header>

      </header>
      <div id="main" class="flex-con">

      </div>
      <div id="footer" class="border-t">
          <ul class="flex-wrap" >
              <li tapmode="hover" onclick="randomSwitchBtn( this,1 );" class="flex-con active" >首页</li>
              <li tapmode="hover" onclick="randomSwitchBtn( this,2 );" class="flex-con" >大学</li>
              <li tapmode="hover" onclick="randomSwitchBtn( this,3 );" class="flex-con" >广场</li>
              <li tapmode="hover" onclick="randomSwitchBtn( this,4 );" class="flex-con" >我</li>
          </ul>
      </div>
  </div></body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    apiready = function () {
        $api.fixStatusBar( $api.dom('header') );

        api.setStatusBarStyle({
            style: 'light',
            color:'#292929'
        });
        funIniGroup();
    }

    function funIniGroup(){
        var eHeaderLis = $api.domAll('header li'),
            frames = [];
        for (var i = 0,len = eHeaderLis.length; i < len; i++) {
                frames.push( {
                    name: 'frame'+i,
                    url: './html/frame'+i+'.html',
                    bgColor : 'rgba(0,0,0,.2)',
                    bounces:true
                } )
        }
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: $api.dom('header').offsetHeight,
                w: 'auto',
                h: $api.dom('#main').offsetHeight
            },
            index: 0,
            frames: [{
                name: 'frame0',
                url: 'html/frame0.html',
                bounces:false
            },{
                name: 'footer_tab_1',
                url: 'html/frame1.html',
                bounces:false
            },{
                name: 'footer_tab_2',
                url: 'html/frame2.html',
                bounces:false
            },{
                name: 'footer_tab_3',
                url: 'html/frame3.html',
                bounces:false
            },{
                name: 'footer_tab_4',
                url: 'html/frame4.html',
                bounces:false
            }]
        }, function(ret, err) {

        });

// -----------------------------------------------------
      api.openFrameGroup({
        name: 'index_form',
        rect: {
           x: 0,
           y: 110,
           w: 'auto',
           h: $api.dom('#main').offsetHeight-110

        },
        frames: [{
            name: 'group1',
            url: 'html/group1.html',
            bgColor: '#fff'
        }, {
            name: 'group2',
            url: 'html/group2.html',
            bgColor: '#fff'
        }, {
            name: 'group3',
            url: 'html/group3.html',
            bgColor: '#fff'
        }]
      }, function(ret, err) {
        var index = ret.index;
        api.sendEvent({
            name: 'index_send',
            extra: {
                index: index,
            }
        });

      });
      api.setFrameGroupIndex({
          name: 'index_form',
          index: 0
      });


    }

    // 随意切换按钮
    function randomSwitchBtn( tag,keys ) {
      if(keys==1){
        api.setFrameGroupAttr({
            name: 'index_form',
            hidden: false
        });
      }else{
        api.setFrameGroupAttr({
            name: 'index_form',
            hidden: true
        });
      }
      if(keys==3){
        api.setFrameGroupAttr({
            name: 'circle_form',
            hidden: false
        });
        api.openFrameGroup({
          name: 'circle_form',
          rect: {
             x: 0,
             y: 74,
             w: 'auto',
             h: $api.dom('#main').offsetHeight-74

          },
          frames: [{
              name: 'cir1',
              url: 'html/cir1.html',
              bgColor: '#fff'
          }, {
              name: 'cir2',
              url: 'html/cir2.html',
              bgColor: '#fff'
          }]
        }, function(ret, err) {
          var index = ret.index;
          api.sendEvent({
              name: 'cir_send',
              extra: {
                  index: index,
              }
          });

        });
        api.setFrameGroupIndex({
            name: 'circle_form',
            index: 0
        });

      }else{
        api.setFrameGroupAttr({
            name: 'circle_form',
            hidden: true
        });
      }





      if(keys==2){
        api.setFrameGroupAttr({
            name: 'unif_form',
            hidden: false
        });
        api.openFrameGroup({
          name: 'unif_form',
          rect: {
             x: 0,
             y: 85,
             w: 'auto',
             h: $api.dom('#main').offsetHeight-85

          },
          frames: [{
              name: 'unif1',
              url: 'html/unif1.html',
              bgColor: '#fff'
          }, {
              name: 'unif2',
              url: 'html/unif2.html',
              bgColor: '#fff'
          }]
        }, function(ret, err) {
          var index = ret.index;
          api.sendEvent({
              name: 'unif_form',
              extra: {
                  index: index,
              }
          });

        });
        api.setFrameGroupIndex({
            name: 'unif_form',
            index: 0
        });

      }else{
        api.setFrameGroupAttr({
            name: 'unif_form',
            hidden: true
        });
      }




































        if( tag == $api.dom('#footer li.active') )return;
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('header li'),
            index = 0;
        for (var i = 0,len = eFootLis.length; i < len; i++) {
            if( tag == eFootLis[i] ){
                index = i;
            }else{
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
        $api.addCls( eFootLis[index], 'active');
        $api.addCls( eHeaderLis[index], 'active');
        api.setFrameGroupIndex({
            name: 'group',
            index: index
        });
    }
</script>
